<template>
  <scroll-view class="review-container" scroll-y>
    <!-- 评价统计 -->
    <view v-if="reviews.length > 0" class="review-stats">
      <view class="stats-left">
        <text class="score-big">{{ stats.averageScore }}</text>
        <text class="score-label">综合评分</text>
        <view class="stars">
          <uni-icons 
            v-for="i in 5" 
            :key="i" 
            type="star-filled" 
            size="16" 
            :color="i <= Math.floor(stats.averageScore) ? '#FFD700' : '#E0E0E0'"
          ></uni-icons>
        </view>
      </view>
      <view class="stats-right">
        <view class="stat-item">
          <text class="stat-label">好评 {{ stats.goodCount }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">中评 {{ stats.mediumCount }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">差评 {{ stats.badCount }}</text>
        </view>
      </view>
    </view>
    
    <!-- 评价列表 -->
    <view v-if="reviews.length > 0" class="review-list">
      <view 
        v-for="review in reviews" 
        :key="review.id"
        class="review-item"
      >
        <view class="review-header">
          <image :src="review.customerAvatar" class="user-avatar"></image>
          <view class="user-info">
            <text class="user-name">{{ review.customerName }}</text>
            <view class="review-stars">
              <uni-icons 
                v-for="i in 5" 
                :key="i" 
                type="star-filled" 
                size="14" 
                :color="i <= review.score ? '#FFD700' : '#E0E0E0'"
              ></uni-icons>
            </view>
          </view>
          <text class="review-time">{{ review.createTime }}</text>
        </view>
        
        <text class="review-content">{{ review.content }}</text>
        
        <!-- 评价图片 -->
        <view v-if="review.images && review.images.length > 0" class="review-images">
          <image 
            v-for="(img, idx) in review.images" 
            :key="idx"
            :src="img" 
            class="review-img"
            mode="aspectFill"
          ></image>
        </view>
        
        <!-- 商家回复 -->
        <view v-if="review.replyContent" class="merchant-reply">
          <view class="reply-header">
            <uni-icons type="chatbubble" size="16" color="#00C853"></uni-icons>
            <text class="reply-label">商家回复:</text>
          </view>
          <text class="reply-content">{{ review.replyContent }}</text>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-else class="empty-tip">
      <uni-icons type="chatbubble" size="80" color="#ccc"></uni-icons>
      <text class="empty-text">暂无评价</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
interface Review {
  id: number;
  customerName: string;
  customerAvatar: string;
  score: number;
  content: string;
  images: string[];
  replyContent?: string;
  createTime: string;
}

interface ReviewStats {
  averageScore: number;
  totalCount: number;
  goodCount: number;
  mediumCount: number;
  badCount: number;
}

interface Props {
  reviews: Review[];
  stats: ReviewStats;
}

defineProps<Props>();
</script>

<style scoped>
.review-container {
  height: 100%;
  background-color: #f5f5f5;
}

.review-stats {
  display: flex;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  gap: 60rpx;
}

.stats-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.score-big {
  font-size: 72rpx;
  color: #ff9800;
  font-weight: bold;
  line-height: 1;
}

.score-label {
  font-size: 24rpx;
  color: #999;
}

.stars {
  display: flex;
  gap: 5rpx;
}

.stats-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15rpx;
}

.stat-item {
  display: flex;
  align-items: center;
}

.stat-label {
  font-size: 26rpx;
  color: #666;
}

.review-list {
  background-color: #fff;
}

.review-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.review-stars {
  display: flex;
  gap: 5rpx;
}

.review-time {
  font-size: 24rpx;
  color: #999;
}

.review-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.review-images {
  display: flex;
  gap: 15rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.review-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.merchant-reply {
  background-color: #f8f8f8;
  padding: 20rpx;
  border-radius: 8rpx;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 10rpx;
}

.reply-label {
  font-size: 26rpx;
  color: #00C853;
  font-weight: 500;
}

.reply-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
</style>